<script setup>
import { TreeListAPI } from '@/api/mold/requisition'
import mold from './mold.vue'
import useUserStore from '@/store/modules/user'

/**
 * 用户信息
 */
const useUser = useUserStore()
console.log(useUser.username, 'useUser')
// 子传父
const emit = defineEmits()
const { proxy } = getCurrentInstance()
/**
 * 字典
 */
const { sys_alarm_way } = proxy.useDict('sys_alarm_way')

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  //   传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  //   传入数据 弹窗标题
  title: {
    type: String,
    default: '新增',
  },
})

/**
 * 设备弹窗
 */
const thresholdShow = ref(false)

/**
 * 选中的id
 */
const ids = ref([])
/**
 * 表单字段
 */
const ruleForm = reactive({
  mouldList: [],
  username: useUser.nickName,
})
// 列表枚举
const column = ref([
  { label: '模具编码', prop: 'mouldCode' },
  { label: '模具名称', prop: 'mouldName' },
  { label: '模具类型', prop: 'mouldType' },
  { label: '模具型号', prop: 'mouldSpecification' },
  { label: '制造厂商', prop: 'factoryName' },
])

/**
 * 安装地点
 */
const dataTree = ref([])

/**
 * 表单校验
 */
const rules = reactive({
  deviceName: [{ required: true, message: '请选择设备', trigger: 'blur' }],
  installationLocation: [
    { required: true, message: '请填写位置', trigger: 'blur' },
  ],
  alarmModeList: [
    { required: true, message: '请选择告警方式', trigger: 'blur' },
  ],
  users: [{ required: true, message: '请选择告警人员', trigger: 'change' }],
})

/**
 * 提交方法
 */
const submit = async () => {
  const valid = await proxy.$refs.ruleFormRef.validate()
  if (!valid) return false
  if (ruleForm.mouldList.length == 0) {
    proxy.warningMsg('至少选择一条模具!')
    return false
  }
  ruleForm.scrapBy = useUser.userId
  return ruleForm
}

/**
 * 安装地点
 */
const treeLisDdl = async () => {
  const { data: res } = await TreeListAPI()
  dataTree.value = res
}
treeLisDdl()

/**
 * 勾选的数据
 */
const handleSelectionChange = (v) => {
  console.log(v, 'v')
  ids.value = v.ids
}

/**
 * 设备选择
 */
const preservationThreaHold = (v) => {
  ruleForm.mouldList = [...ruleForm.mouldList, ...v]

  thresholdShow.value = false
}

/**
 * 删除
 */
const RemoveTypeFn = () => {
  console.log('-------', ids.value)
  if (ids.value.length > 0) {
    ruleForm.mouldList.forEach((t, i) => {
      ids.value.forEach((v) => {
        if (v == t.id) {
          console.log(i, 'i---')
          ruleForm.mouldList.splice(i, 1)
        }
      })
    })
  }
}

/**
 * 初始化数据
 */
const initData = () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    )
  }
}

initData()
// 导出方法
defineExpose({ submit })
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="报废人">
          <el-input
            v-model="ruleForm.username"
            disabled
            placeholder="请填写位置"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="rk">
      <el-form-item label="备注" prop="remark">
        <el-input
          :disabled="props.disabled"
          :rows="2"
          type="textarea"
          clearable
          v-model="ruleForm.remark"
        />
      </el-form-item>
    </div>
  </el-form>
  <div class="flex-items-center flex-between" style="width: 100%">
    <div class="title">选择摸具</div>
    <div class="flex-between" v-if="props.title == '新增'">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="添加"
        placement="top-start"
      >
        <el-icon @click="thresholdShow = true">
          <Plus />
        </el-icon>
      </el-tooltip>
      <div style="margin: 0 10px"></div>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="勾选删除"
        placement="top-start"
      >
        <el-icon @click="RemoveTypeFn">
          <Minus />
        </el-icon>
      </el-tooltip>
    </div>
  </div>
  <p-table
    keyId="id"
    :column="column"
    stripe
    border
    :data="ruleForm.mouldList"
    height="500"
    highlight-current-row
    @change="handleSelectionChange"
  >
    <template #columnCell="{ column, record }">
      <p-producer
        :data="record.auxiliaryAttribute"
        v-if="column.prop == 'fzsx'"
      />
    </template>
  </p-table>

  <!-- 阈值 -->
  <mold
    :dictId="2"
    :bdb="false"
    :is-show="thresholdShow"
    :ids="ruleForm.mouldList.map((t) => t.id)"
    @cancel="thresholdShow = false"
    @preservation="preservationThreaHold"
  />
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
